<script setup>
import { ref, reactive, inject, nextTick } from "vue";

import ConfigProvider from "@/components/ConfigProvider.vue";
import Viewer from "@/components/Viewer.vue";
import TileSet from "@/components/TileSet.vue";
import Imagery from "@/components/Imagery.vue";
import AirSpace from "@/components/AirSpace/index.vue";
import AirGrid from "@/components/AirGrid/index.vue";
import NoFlyGrid from "@/components/NoFlyGrid/index.vue";
import AirRoute from "@/components/AirRoute/index.vue";
import Footer from "@/components/Footer.vue";
import StatLeft from "@/components/Stat/Left.vue";
import StatRight from "@/components/Stat/Right.vue";
import Route from "@/components/Route/index.vue";
import InfoTable from "@/components/InfoTable/index.vue";

// 显隐集合
const visible = reactive({
  // 空域
  airSpace: false,
  // 网格
  airGrid: false,
  // 禁飞网格
  noFlyGrid: false,
  // 航路
  airRoute: false,
  // 航线
  airLine: false,
  // 无人机场
  airPort: false,
  // 分析报表
  statLeft: false,
  statRight: false,
  // 起降点管理
  routePoints: false,
  // 生成航路
  routeGenerate: false,
  // 显示航路网格
  routeGrids: false,
  // 显示航路
  routeList: false,
  // 显示动态航路起降点
  routePort: false,
  // 信息统计表
  infoTable: false,
});

// 空域组件
const airSpace = ref(null);
// 航路组件
const airRoute = ref(null);
// 网格组件
const airGrid = ref(null);
// 航路管理组件
const route = ref(null);

const setRightAsideTableVisible = inject("setRightAsideTableVisible");

// 底部footer控件change事件
const handleFooterChange = (key, value) => {
  if (typeof value === "boolean") {
    visible[key] = value;
  } else {
    if (key === "statRight") {
      setRightAsideTableVisible(!visible[key]);
    }

    visible[key] = !visible[key];
    // 对于css样式处理
    if ("airGrid" == key) {
      airSpace.value.switchTopStyle(visible["airGrid"]);
    } else if ("airSpace" == key) {
      console.log("statRight", visible.statRight);

      if (visible.statRight) {
        nextTick(() => {
          airSpace.value.switchTopStyle("statRightShow");
        });
      }
      if (visible[key]) {
        nextTick(() => {
          airSpace.value.switchTopStyle(visible["airGrid"]);
        });
      }
    }
  }
};

// 底部footer控件点击事件
const handleFooterClick = (key, type) => {
  if (key === "addAirRoute") {
    // 添加航路
    airRoute.value.handleDrawingRoute();
  } else if (key === "addAirSpace") {
    // 添加空域
    airSpace.value.handleDrawingSpace(type);
  } else if (key === "generateRoute") {
    route.value.handleGenerateRoute();
  }
};
</script>

<template>
  <div style="position: relative; height: 100%; width: 100%">
    <ConfigProvider>
      <Viewer>
        <Imagery />

        <!-- 模型 -->
        <TileSet />

        <!-- 空域 -->
        <AirSpace
          ref="airSpace"
          :visible="visible.airSpace"
          :leftSpace="visible.statRight"
        />

        <!-- 网格 -->
        <AirGrid :visible="visible.airGrid" />
        <!-- 禁飞区域 -->
        <NoFlyGrid :visible="visible.noFlyGrid" />

        <!-- 航路 -->
        <AirRoute
          ref="airRoute"
          :routeVisible="visible.airRoute"
          :lineVisible="visible.airLine"
          :portVisible="visible.airPort"
        />

        <!-- 航路管理 -->
        <Route
          ref="route"
          :routePoints="visible.routePoints"
          :routeGenerate="visible.routeGenerate"
          :routeGrids="visible.routeGrids"
          :routeList="visible.routeList"
          :portVisible="visible.routePort"
          @change="handleFooterChange"
        />

        <!-- 统计 -->
        <StatLeft :visible="visible.statLeft" />
        <StatRight :visible="visible.statRight" />

        <!-- 信息统计表 -->
        <InfoTable :visible="visible.infoTable" />

        <Footer
          :visible="visible"
          @change="handleFooterChange"
          @click="handleFooterClick"
        />
      </Viewer>
    </ConfigProvider>
  </div>
</template>

<style scoped></style>
